<template>
  <div class="card-body">
        <div class="table-responsive">
          <el-table class="table table-bordered" :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" @row-click="openDetails"
             v-loading="loading2"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
            >
            <el-table-column label="Pod名" width="160">
              <template v-slot="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="节点名称" width="160">
              <template v-slot="scope">
                <div class="name-wrapper">   
                  <el-tag size="medium">  {{ scope.row.NodeName }}</el-tag>
                                    </div>
              </template>
            </el-table-column>
            <el-table-column label="Image">
              <template v-slot="scope">
                <span style="margin-left: 10px">
                  <el-tag size="medium"> {{ scope.row.Images }}</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间">
              <template v-slot="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">
                  <el-tag size="medium">   {{ scope.row.CreateTime }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="totalSize"
        :page-size="size"
        background
        @current-change="goRightPage"
      ></el-pagination>
    </div>
      </div>
</template>
<script>
import { podsGetList,deletePod} from "@/network/pods.js";

export default {
  name: "pods",
   data() {
    return {
      tableData: [],
      loading2: true,
      multipleSelection: [],
      totalSize: 50,
      current: 1,
      size: 5,
        form: {
        apps: [],
      },
    }
    
  },
  watch: {
        multipleSelection: function () {
            let arr = [];
            for (let i in this.multipleSelection) {
              arr.push(this.multipleSelection[i].Names);
            }
            console.log('勾中的id为：' + arr.join());
        }
    },
    created() {
    podsGetList({namespace: "default"}).then((res) => {
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data
        this.totalSize=res.data.length
        this.loading2=false

      }
    })
  },
  methods: {
            //打开详情页弹窗
        openDetails(row,event) {
          console.log(row,event)
                alert(row.name);
            
        },

        // 获取多选参数
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleDelete(val,row){
             console.log(row)
                alert(row.name);
                deletePod({uid: row.name }).then((res) => {
      console.log(res);
      if (res.code == 200) {
      alert(res.code)

      }
    })
        }
  },
};
</script>